<template>
<!-- 模拟疫情防控页 -->
  <div class="simulation-page">
    <!-- header 部分 -->
    <top-bar class="header">
      <template v-slot:left>{{ '时间：第' + time + '周' }}</template>
      <template v-slot:center>
        <img
          src="../../assets/img/viruswatcher.png"
          alt="疫情守望者"
          @click="back_button"
          style="height: 32px;cursor: pointer;">
      </template>
      <template v-slot:right>{{ '物资：' + material + '份' }}</template>
    </top-bar>

    <!-- content 部分 -->
    <simulation-page-table @finalAllocation="finalAllocation" :material="material"/>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

import topBar from '../../components/content/top_bar/top_bar.vue'
import simulationPageTable from './child_comps/simulation_page_table.vue'

const emit = defineEmits(['changePage'])
const time = ref(1); // 时间：单位/周
const material = ref(10); // 物资：单位/份

const back_button = () => {
  emit('changePage', 'lar');
}

/**
 * simulation_page_table 子组件发来的事件
 */
const finalAllocation = (value, bool) => { // eslint-disable-line no-unused-vars
  if(bool == 1) time.value++;
  material.value -= value;
}
</script>

<style scoped>
  .header {
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(60, 60, 60, 0.1);
  }
</style>